<template>
  <up-tabbar
    :value="modelValue"
    @change="handleChange"
    :fixed="true"
    :placeholder="false"
    :safeAreaInsetBottom="true"
  >
    <up-tabbar-item
      v-for="(item, index) in items"
      :key="index"
      :text="item.text"
      :icon="modelValue === index ? item.activeIcon : item.icon"
      @click="() => handleClick(index)"
    />
  </up-tabbar>
</template>

<script>
export default {
  name: 'CustomTabBar',
  props: {
    modelValue: Number,
    items: Array
  },
  emits: ['update:modelValue', 'menuClick'],
  methods: {
    handleClick(index) {
		 console.log('点击菜单 index:', index)
		    console.log('图标名:', this.items[index].icon, this.items[index].activeIcon)
      this.$emit('menuClick', index)
    },
    handleChange(value) {
      this.$emit('update:modelValue', value)
    }
  }
}
</script>